<template>
	<view class="container"  v-show="demandListShow">
		<view class="head">
			<view hover-class="none" class="search">
				<!-- <view class="left-icon" @click="navigateBack">
					<uni-icons class="icon" color="#a1a0a0" type="left" size="20"></uni-icons>
				</view> -->
				<view class="icon-input"  @click="searchClick()">
					<uni-icons class="icon" color="#a1a0a0" type="search" size="20"></uni-icons>
					<view class="sousuoTop">{{param.searchWord?param.searchWord:'搜索关键词'}}</view>
					<!-- <input placeholder="" placeholder-class="input" /> -->
				</view>
			</view>
			<view class="menu">
				<scroll-view scroll-x class="scroll-menu-list ">
					<view class="item" v-for="(item,index) in searchwordList" :class="{active:active==index}" @click="changeTable(index)" :key="index">
						<view>{{item.keyword}}</view>
						<image class="imga" src="https://m.nocexpo.com/statics/js/modules/h5/img/banhu.png" mode="widthFix"/>
					</view>
				</scroll-view>
			</view>
			<view class="condition">
				<view class="c" :class="{active:index==currentIndex}" v-for="(item,index) in filterList" @click="itemClick(index)">
					<view class="title">
						{{item}}
						<view class="triangle-down"></view>
					</view>
				</view>
				<view class="module" v-if="isMoule">
					<view class="leibie">
						<view class="data">
							<view class="item" v-for="(item,index) in demandClassifyList"
								:class="{actived:item.activeClass == true}" @click="selectClassify(item)" :key="index">
								{{item.className}}
							</view>
						</view>
						<view class="btns">
							<view class="" @click="resetClass()">重置</view>
							<view class="" @click="confirmClass()">确定</view>
						</view>
					</view>
				</view>
				<view class="module" v-if="isState">
					<view class="leibie">
						<view class="data">
							<view class="item" v-for="(item,index) in stateList"
							:class="{actived:item.activeState == true}" @click="selectState(item)" :key="index">
							{{item.className}}
							</view>
						</view>
						<view class="btns">
							<view class="" @click="resetState()">重置</view>
							<view class="" @click="confirmState()">确定</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y class="scroll-view" @scrolltolower="onRefresh" @scroll="scroll" :scroll-top="scrollTop">
			<view class="data">
				<navigator hover-class="none" class="item" v-for="(demand,index) in demandList" @click="toDetail(demand.id)">
					<view class="title">
						<view class="left" v-if="demand.classifyName != null">
							<image class="rz" v-show="demand.ifAttestation  == 1" src="https://m.nocexpo.com/statics/js/modules/h5/img/renzheng.png" mode="heightFix" />
							<image class="vip" v-show="demand.ifMember  == 1" style="margin-top: 0rem;width:49rpx;height:42rpx" :src="imgUrl + '/statics/js/modules/applet/img/vipp.png'" mode="heightFix" />
							{{demand.classifyName}}:{{demand.shortTitle}}
						</view>
						<view class="left" v-else>
							<image class="rz" v-show="demand.ifAttestation  == 1"  src="https://m.nocexpo.com/statics/js/modules/h5/img/renzheng.png" mode="heightFix" />
							寻求:{{demand.shortTitle}}
						</view>
						<!-- 需求状态图片地址，不根据状态判断，直接从后台返回图片本地地址 -->
						<image v-if="demand.demandState == 1" class="rightImg" src="https://m.nocexpo.com/statics/js/modules/h5/img/pipeizhong.png" mode="heightFix" />
						<image v-else-if="demand.demandState == 2" class="rightImg" src="https://m.nocexpo.com/statics/js/modules/h5/img/duijiezhong.png" mode="heightFix" />
						<image v-else-if="demand.demandState == 3" class="rightImg" src="https://m.nocexpo.com/statics/js/modules/h5/img/chenggong.png" mode="heightFix" />
						<image v-else-if="demand.demandState == 4" class="rightImg" src="https://m.nocexpo.com/statics/js/modules/h5/img/yicaigou.png" mode="heightFix" />
					</view>
					<view class="tags">
            <!--v-show="index < 3"-->
						<view @click="goTagNews(item)" class="t" v-for="(item,index) in demand.tagList" v-show="index < 3">#{{item.tagName}}</view>
					</view>
					<view class="attr">
						<view>
							ID:{{demand.id}}
							<text class="interval"></text>
							{{demand.browseCount}}浏览
						</view>
						<view>{{demand.auditAt}}</view>
					</view>
				</navigator>
				<hint ref="hint"></hint>
			</view>
		</scroll-view>
		<!--全局悬浮-->
			<suspension ref="suspension" types="add,group"></suspension>
		</view>
	<view class="searchList" v-show="searchListShow">
		<view class="search" style="padding-top: 15px">
			<view style="margin-right: 22rpx;font-size: 30rpx;" @click="back" class="b-icon icon-b span"></view>
			<view class="input">
				<image mode="widthFix" src="https://m.nocexpo.com/statics/js/modules/h5/img/search3.png"/>
				<view class="form" @submit.prevent="enterQuery" action="">
					<input id="searchInput" type="search" ref="searchKey" @confirm="enterQuery" v-model ="param.searchWord"  placeholder="搜索关键词" style="color: black">
				</view>
				<!--<form @submit.prevent="enterQuery" action="">
					<input type="search" ref="searchKey" v-model="search.search" placeholder="搜索关键词">
				</form>-->
			</view>
			<view class="cancel">
				<view style="margin-: 19rpx;color: #00AAA6;font-size: 26rpx"  class="btn a " href="javascript:void(0);" @click="enterQuery">搜索</view>
			</view>
		</view>
		<view class="sort">
			<view style="display: flex;justify-content: space-between;">
				<view class="h3" style="font-size: 29rpx;padding-top: 22rpx">历史搜索</view>
				<view class="span" @click="del" style="position: relative;width: 26rpx;">
					<image mode="widthFix" style="position: absolute;: 50%;top: 50%;transform: translate(-50%, -50%);"  src="https://m.nocexpo.com/statics/js/modules/h5/img/del.svg"/>
				</view>
			</view>
			<view class="ul">
				<view class="li" v-for="searchkey in searchKeyList1">
					<view class="a" href="javascript:void(0);" @click="searchByWord(searchkey,1)">{{searchkey.keyword}}</view>
				</view>
				<view class="li" v-if="visbloe">
					<view class="a" style="position: relative;width: 52rpx;height: 52rpx;line-height: 52rpx;padding: 0;text-align: center;" href="javascript:void(0);" @click="gengduo">
						<image mode="widthFix" style="position: absolute;: 50%;top: 50%;transform: translate(-50%, -50%);width: 18rpx;height: 12rpx;"  src="https://m.nocexpo.com/statics/js/modules/h5/img/sousuo.svg"/>
					</view>
				</view>
			</view>
			<!--搜索无记录-->
			<view class="sort-a" style="width: 100%;height: 100%;text-align: center;" v-if="searchKeyList1.length == 0">
				<view style="font-size:26rpx;color: #A1A0A0;">暂无搜索记录~</view>
			</view>
		</view>
		<view class="sort">
			<view class="h3" style="font-size: 29rpx">需求分类</view>
			<view class="ul">
				<view class= "li" v-for="proClassify in searchProductClassifyList">
					<view class="a" v-if="proClassify" href="javascript:void(0);" @click="searchByWord(proClassify,2)">{{proClassify ? proClassify.className : ""}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import indexApi from '@/utils/request/index.js';
import demandApi from '@/api/demand.js';
import commonApi from '@/utils/commonMethod.js'
import commonMethod from '@/utils/commonMethod.js';
export default {
	data() {
		return {
			type: 1,
			isMoule: false,
			isState: false,
			stateList:[{state:0,className:'匹配中'},{state:2,className:'对接中'},{state:1,className:'已采购'},{state:"成功推荐",className:'成功推荐'}],
			filterList:['综合推荐','时间排序','类别','状态'],
			mypostdemandFlag: false,
			currentUser: {},
			param:{
				relatedType :2,
				search: '',
				searchWord: '',
				page:1,
				limit:10,
				industryId: '',
				brandId: '',
				originId: '',
				userId:this.mypostdemandFlag ?this.currentUser.id : undefined,
				className:[],
				tabId:[],
				tagType:'',
				delFlag:0,
				browseFlag: ''//浏览量排行
			},
			demandClassifyList:[],
			searchProductClassifyList: [],
			searchwordList:[],
			searchKeyList1:[],
			searchKeyList:[],
			demandList:[],
			active:0,
			currentIndex:0,
			scrollTop:0,
			currentPage:1,
			totalPages:0,

			share_title: '需求中心_需求详情-金诺云展;',
			share_desc: '',
			share_url: '',
			demandListShow: true,
			searchListShow  : false,
			visbloe: false,
			register: true,

			startTime:'', //进入页面时间
			endTime:'',//离开页面时间
			imgUrl: indexApi.baseUrl

		};
	},
	async mounted() {
		const currentUserValue = await commonMethod.currentUserAxios()
		this.currentUser = currentUserValue.data.session_user_h5
		this.getSearchProductClassify();
		this.register = await commonMethod.getUserLoginFlag();
		demandApi.getClassifyList().then(data =>{
			this.demandClassifyList = data.data.list;

		});
		demandApi.getSearchWordList().then(data =>{
			this.searchwordList = data.data.list;
			this.searchwordList.unshift({id:0,keyword:'推荐'});
		});
		this.queryDemandList();
		commonMethod.getPageShareConfig().then(res =>{
			  res.data.list.forEach((value, index, array) => {
				if (value.pageParam.includes("demand_list")) {
					if (value.shareTitleConfig != null && value.shareTitleConfig != '') {
						this.share_title = value.shareTitleConfig
					}
					if (value.shareDescConfig != null && value.shareDescConfig != '') {
						this.share_desc = value.shareDescConfig
					}
				}
			})
		})
    const pages = getCurrentPages()
    const currentPage =pages[pages.length - 1]
    this.share_url = currentPage.$page.fullPath
	},
	onShow(){
		if(uni.getStorageSync("register") == 1){
			this.$refs.suspension.setRegister(false);
		}

		setTimeout(()=> {

			if (getApp().globalData.onShow) {
				getApp().globalData.onShow = 0;
				console.log("demo前后台切换之切到前台")
			}
			else {
				console.log("demo页面被切换显示")
				this.startTime = +new Date();
			}

		}, 100);
	},
	onHide(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	onUnload(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	onShareAppMessage: function () {//分享
		return {
			title: this.share_title,
      path: this.share_url + "?sourceUserId=" + uni.getStorageSync("userId"),
			desc: this.share_desc,
			imageUrl: 'https://m.nocexpo.com/statics/js/modules/h5/img/purchase.jpg',
			success: function (res) {
				console.info(res + '成功');
				wx.showToast({
					title: '分享成功',
				})
				// 转发成功
			},
			fail: function (res) {
				console.log(res + '失败');
				// 转发失败
			},

		}
	 },
	/*分享朋友圈 */
	onShareTimeline: function() {
		return {
			title:  this.share_title,
      query: 'sourceUserId=' + uni.getStorageSync("userId"),
      imageUrl: 'http://noctest-new.oss-cn-qingdao.aliyuncs.com/t/nocexpo/20231218/fccff0c781b04acbbeab1919f510734b.jpg',
		}
	},
	methods: {
		saveFootPrint(stayTime){
			commonMethod.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.share_url,"需求列表")

		},
		navigateBack(){
			uni.navigateBack(1)
		},
		searchClick(){
			if (!this.register) {
			  //查询历史搜索记录
			  this.getSearchKey();
			}
			this.demandListShow = false;
			this.searchListShow = true;
		},
	    getSearchKey() {
			demandApi.getSearchKey({}).then(res => {
				this.searchKeyList = res.data.list
				this.searchKeyList1 = []
				for(let i =0;i<this.searchKeyList.length;i++){
					if(i<7){
						this.searchKeyList1.push(this.searchKeyList[i])
						this.visbloe=false
					}else{
						this.visbloe=true
					}
				}
			})
		},
		del(){
			demandApi.del().then(res=>{
				this.searchKeyList1 = []
				// this.visbloe = false
				this.sort=false

			})
		},
		 gengduo(){
			this.searchKeyList1 = this.searchKeyList
			this.visbloe=false
		},
		 enterQuery(type) {
			 this.param.searchWord = this.param.searchWord.trim()
			if (this.param.searchWord) {
				if (!this.register) {
				  this.saveSearchKey()
				}
			}
			if(type){
				this.searchListShow1 = false;
				this.xuqiulbShow = false;
			}else{
				this.searchListShow1 = true;
				this.xuqiulbShow = true;
			}
			this.searchListShow = false;
			this.demandListShow = true;
			this.topShow = true;
			// this.$nextTick(() =>{
			// 	this.$refs.searchKey.focus();
			// });
			// this.$refs.searchKey.blur();
			this.demandList = [];
			this.param.page = 1;
			this.queryDemandList();
		},
		searchByWord(searchVal, type) {
			switch (type) {
				case 1:
					this.param.searchWord = searchVal.keyword.trim()
					this.enterQuery()
					break
				case 2:
					this.param.searchWord = searchVal.className.trim()
					this.enterQuery()
					break
				default:
					break
			}
		},
		back(){
			this.searchListShow = false;
			this.demandListShow = true;
			this.topShow = true;
		},
		getSearchProductClassify() {
			demandApi.getSearchProductClassify().then(res => {
				this.searchProductClassifyList = res.data.list
			})
		},
		saveSearchKey() {
			commonMethod.saveSearchKey({keyword:this.param.searchWord})
		},
		goTagNews(item) {
			uni.navigateTo({
				url:'/pages/product/tag/tagNewsList?activeIndex=3&tagId=' + item.id,

			})
			// window.location.href = '/h5/tagNewsList.html?activeIndex=3&tagId=' + item.id;
		},
		queryDemandList(){
			demandApi.getDemandList(this.param).then(data =>{
				let resList = data.data.page.list;
				if(data.data.page.pageNum == 1 && data.data.page.list.length == 0){
					this.$refs.hint.setStatus('noData');
				}

				for(let i = 0;i < resList.length;i++){
					let demand = resList[i];
					this.$set(demand,"shortTitle",demand.title.substr(0,20));

					if(demand.auditAt != null && demand.auditAt != '') {
						demand.auditAt = commonMethod.transtionTime(demand.auditAt);
					}
					demand.createAt = commonMethod.transtionTime(demand.createAt);

				}


				this.demandList = [...this.demandList,...data.data.page.list];
				this.totalPages = data.data.page.total;
				this.currentPage = data.data.page.pageNum;
			});
		},
		//点击推荐搜索栏关键词
		changeTable(index) {
			if(this.searchwordList[index] != null && this.searchwordList[index] != ''){
				this.param.search = this.searchwordList[index].keyword;
			}
			//查询推荐
			if (index == 0) {
				this.param.search = ''
			}
			//初始化分页参数
			this.param.page = 1
			//点击非当前选中的关键词才触发查询
			if(this.active!=index){
				//查询之前先清空数据
				this.demandList = []
				this.queryDemandList();
			}
			//设置选中的下标值
			this.active = index;
		},
		//筛选
		itemClick(index) {
			this.currentIndex = index;
			this.param.page = 1;
			//综合排序
			if(index==0){
				this.demandList = [];
				this.isMoule = false;
				this.isState = false;
				this.param.tagType = '';
				this.resetClass();
				this.resetState();
				this.queryDemandList()
			}
			//时间排序
			else if(index==1){
				this.demandList = [];
				this.isMoule = false;
				this.isState = false;
				this.param.tagType = 1;
				this.resetClass();
				this.resetState();
				this.queryDemandList();
			}
			//类别
			else if(index==2){
				this.isState = false;
				this.isMoule = !this.isMoule;

			}
			//状态
			else if(index==3){
				this.isMoule = false;
				this.isState = !this.isState;
			}
		},
		selectClassify(item){
			if(item.activeClass){
				item.activeClass = !item.activeClass;
			}else{
				item.activeClass = true;
			}
			this.$forceUpdate()
		},
		selectState(item){
			if(item.activeState){
				item.activeState = !item.activeState;
			}else{
				item.activeState = true;
			}
			this.$forceUpdate()
		},
		resetClass(){
			this.demandClassifyList.forEach(item =>{
				item.activeClass = false;
			});
			this.$forceUpdate();
			this.param.className = [];
		},
		confirmClass(){
			this.demandList = [];
			this.param.className = [];
			this.demandClassifyList.forEach(item =>{
				if(item.activeClass == true){
					this.param.className.push(item.className);
				}
			});
			this.param.page = 1;
			this.queryDemandList();
			this.isMoule = false;
		},
		resetState(){
			this.stateList.forEach(item =>{
				item.activeState = false;
			})
			this.$forceUpdate();
			this.param.tabId = [];
		},
		confirmState(){
			this.demandList = [];
			this.param.tabId = [];
			this.stateList.forEach(item =>{
				if(item.activeState == true){
					this.param.tabId.push(item.state)
				}
			});
			this.param.page = 1;
			this.queryDemandList();
			this.isState = false;
		},
		scroll(e) {
			this.scrollTop = e.detail.scrollTo;
			this.$store.dispatch('renewScrollTop', e.detail.scrollTop);
		},
		onRefresh() {
			if(this.currentPage < this.totalPages){
				this.param.page++;
				this.$refs.hint.setStatus('loading');
				console.log("还有下一页" + this.param.page);
				this.queryDemandList();
			}else{
				this.$refs.hint.setStatus('loadingComplete');
				console.log("没有下一页")
			}
		},
		// async toDetail(demandId){
		// 	//判断是否登录
			// this.register = await commonApi.getUserLoginFlag();
			// if (this.register) {
			// 	uni.redirectTo({
			// 		url: '/pages/account/login/login?demandId='+demandId,
			// 	})
			// }else{
			// 	uni.navigateTo({
			// 		url:'/pages/need/detail/detail?demandId=' + demandId
			// 	})
			// }

		// }
		toDetail(demandId){
					uni.navigateTo({
						url:'/pages/need/detail/detail?demandId=' + demandId
					})
				}
	}
};
</script>
<style lang="scss">
.head {
	background: #fff;
	padding-bottom: 25rpx;
}
.search {
	display: flex;
	align-items: center;
	justify-content: space-between;
	line-height: 100rpx;
	overflow: hidden;
	.-icon {
		height: 100%;
		padding: 0px $interval-min;
	}
	.icon-input {
		flex: 1;
		display: flex;
		align-items: center;
		height: 68rpx;
		background: #f7f7f7;
		border-radius: 35rpx;
		margin-right: $interval;
		border: 2rpx solid $color-primary;
		.icon {
			margin-: 25rpx;
			margin-right: 18rpx;
		}
		input {
			flex: 1;
			color: $text-color;
		}
		.input {
			color: #a1a0a0;
		}
	}
}
.menu {
	margin-left: $interval;
	margin-top: 5rpx;
}
.condition {
	margin-top: 20rpx;
	display: flex;
	padding: 0px $interval;
	position: relative;
	.c {
		margin-right: 11%;

		.title {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			.triangle-down {
				width: 0;
				height: 0;
				border-left: 8rpx solid transparent;
				border-right: 8rpx solid transparent;
				border-top: 12rpx solid black;
				margin-left: 10rpx;
			}
		}
	}
	.c.active {
		.title {
			font-weight: bold;
		}
	}
	.c:nth-child(4) {
		margin-right: 0px;
	}

	.module {
		position: absolute;
		width: 100%;
		left: 0px;
		top: 60rpx;
		z-index: 3;
		background-color: #fff;
		box-shadow: 0px 10rpx 10rpx #ddd;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		.leibie {
			padding: 0px $interval $interval;
			.data {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: $interval-min 0px;
				.item {
					width: 30%;
					line-height: 20rpx;
					border-radius: 40rpx;
					text-align: center;
					background: $bg-color;
					margin-bottom: $interval-min;
				}
			}
			.btns {
				border: 2rpx solid $color-primary;
				background-color: $color-primary;
				display: flex;
				line-height: 70rpx;
				overflow: hidden;
				border-radius: 35rpx;
				text-align: center;
				view {
					width: 50%;
				}
				view:first-child {
					color: $color-primary;
					background-color: #fff;
				}
				view:last-child {
					color: #fff;
				}
			}
		}
	}
}

.scroll-view{
	height:calc(100% - 260rpx);
}
.data {
	padding: 0px $interval-min;
	.item {
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: $interval-min;
		padding: $interval 0px;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left {
				display: flex;

				align-items: center;
				position: relative;
				padding-left: $interval;
				font-size: $font-size-max;
				&::after {
					width: 6rpx;
					height: 26rpx;
					background: #00b7b3;
					border-radius: 0rpx 200rpx 200rpx 0rpx;
					content: '';
					left: 0px;
					top: 8rpx;
					position: absolute;
				}
				.rz {
					height: 32rpx;
					margin-right: 12rpx;
				}
			}
			.rightImg {
				height: 48rpx;
			}
		}
		.tags {
			display: flex;
			//justify-content: flex-start;
      flex-wrap: wrap;
			padding: 0px $interval;
			.t {
				padding: 0px $interval-min;
				line-height: 48rpx;
				background: #f2f3f5;
				border-radius: 8rpx;
				color: $text-color-grey;
				margin-right: 16rpx;
				font-size: $font-size-min;
				margin-top: $interval-min;
			}
		}
		.attr{
			display: flex;
			margin-top: 24rpx;
			font-size: $font-size-min;
			padding: 0px $interval;
			justify-content: space-between;
			color: #A1A0A0;
			.interval{
				padding: 0px 20rpx;


			}
		}
	}
	.actived {
		border: 1px solid #00AAA6;
		background: #ECF8F8!important;
		color: #00AAA6!important;
	}
}
.searchList .search {
    padding: 0 28rpx;
    background: #fff;
}
.search {
    padding: 0 28rpx;
    height: 84rpx;
    overflow: hidden;
    background-color: #fff;
    display: flex;
    align-items: center;
}
.searchList .search .input {
    float: left;
    background: #f5f5f9;
    width: 80%;
}
.search .input {
    float: right;
    width: 60%;
    padding: 0 28rpx;
    height: 60rpx;
    border-radius: 35rpx;
    font-size: 20rpx;
    background-color: #f7f7f7;
}
.search .input image {
    float: left;
    width: 24rpx;
    margin-top: 18rpx;
    margin-right: 18rpx
}
.searchList .search .input input {
    color: #8f9aa8;
    background: transparent;
    height: 60rpx;
    width: 90%;
    border: 0;
    font-size: 22rpx;
    line-height: normal;
}
.search .input input {
    // width: 470rpx;
    float: left;
    // height: 60rpx;
    // line-height: 60rpx;
    // border: 0;
    // background: transparent;
    // color: #bbb;
    // font-size: 22rpx;
}
.searchList .search .cancel {
    width: 12%;
}
.searchList .search .btn {
    /* float: right; */
    // font-size: 0.4rem;
    // color: #333333;
    display: block;
    height: 60rpx;
    line-height: 60rpx;
}
.searchList .sort {
    padding: 0 28rpx 28rpx 28rpx;
    background: #fff;
}
.searchList .sort .h3 {
    font-size: 22rpx;
    color: #333333;
    margin-bottom: 22rpx;
}
image {
    width: 100%;
    vertical-align: top;
}
.searchList .sort .ul {
    overflow: hidden;
}
.ul {
    list-style: none;
}
.searchList .sort .li {
    float: left;
    margin-right: 18rpx;
    margin-bottom: 18rpx;
}
.searchList .sort .li .a {
    display: inline-block;
    padding: 0 28rpx;
    height: 56rpx;
    line-height: 56rpx;
    background: #f5f5f9;
    border-radius: 28rpx;
}
.sousuoTop {
    color: rgb(161, 160, 160);
    font-size: 26rpx;
	 margin-right: 22rpx;
}

</style>
